<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="style/images/favicon.png">
<title>Frost</title>
<!-- Bootstrap core CSS -->
<link href="style/css/bootstrap.css" rel="stylesheet">
<link href="style/css/settings.css" rel="stylesheet">
<link href="style/css/owl.carousel.css" rel="stylesheet">
<link href="style/js/google-code-prettify/prettify.css" rel="stylesheet">
<link href="style/js/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" media="all" />
<link href="style/js/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.2" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet">
<link href="style/css/color/blue.css" rel="stylesheet">
<link href='http://fonts.useso.com/css?family=Josefin+Sans:400,600,700,400italic,600italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Dosis:200,300,400,500,600,700,800' rel='stylesheet' type='text/css'>
<link href="style/type/fontello.css" rel="stylesheet">
<link href="style/type/budicons.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="style/js/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
</head>
<body>
<div class="body-wrapper">
  <div class="navbar default">
    <div class="navbar-header">
      <div class="container">
        <div class="basic-wrapper"> <a class="btn responsive-menu pull-right" data-toggle="collapse" data-target=".navbar-collapse"><i class='icon-menu-1'></i></a> <a class="navbar-brand" href="index.html"><img src="style/images/logo.png" alt="" data-src="style/images/logo.png" data-ret="style/images/logo@2x.png" class="retina" /></a> </div>
        <nav class="collapse navbar-collapse pull-right">
          <ul class="nav navbar-nav">
            <li><a href="./#home">Home</a></li>
            <li><a href="./#services">Services</a></li>
            <li><a href="./#portfolio">Portfolio</a></li>
            <li><a href="./#about">About</a></li>
            <li><a href="./#pricing">Pricing</a></li>
            <li><a href="./#contact">Contact</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle js-activated">Features</a>
              <ul class="dropdown-menu">
                <li class="dropdown-submenu"><a href="#">Blog</a>
                  <ul class="dropdown-menu">
                    <li><a href="blog.html">Medium Image Layout</a></li>
                    <li><a href="blog2.html">Grid Blog</a></li>
                    <li><a href="blog3.html">Grid Blog with Sidebar</a></li>
                    <li><a href="blog4.html">Classic Blog</a></li>
                    <li><a href="blog-post.html">Blog Post</a></li>
                  </ul>
                </li>
                <li class="dropdown-submenu"><a href="#">Portfolio Posts</a>
                  <ul class="dropdown-menu">
                    <li><a href="portfolio-post.html">Post with Wide Slider</a></li>
                    <li><a href="portfolio-post2.html">Post with Half Slider</a></li>
                    <li><a href="portfolio-post3.html">Post with Carousel Gallery</a></li>
                    <li><a href="portfolio-post4.html">Post with Multiple Images</a></li>
                    <li><a href="portfolio-post5.html">Post with Half Images</a></li>
                    <li><a href="portfolio-post6.html">Post with Fullscreen Slider</a></li>
                    <li><a href="portfolio-post7.html">Post with Fullwidth Video</a></li>
                    <li><a href="portfolio-post8.html">Post with Half Video</a></li>
                  </ul>
                </li>
                <li><a href="elements.html">Elements</a></li>
                <li><a href="headings.html">Headings</a></li>
                <li><a href="footer.html">Footer with Widgets</a></li>
                <li><a href="pricing.html">Pricing Table</a></li>
                <li><a href="fontello.html">Font Icons - Fontello</a></li>
               <li><a href="budicon.html">Font Icons - Budicon</a></li><li><a href="http://www.cssmoban.com">More</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <!--/.nav-collapse --> 
  </div>
  <!--/.navbar -->
  <div class="offset"></div>
  <div class="light-wrapper">
    <div class="container inner">
      <div class="row">
        <div class="col-sm-6">
          <h3>Tabs</h3>
          <div class="tabs tabs-top left tab-container">
            <ul class="etabs">
              <li class="tab"><a href="#tab-1">This is</a></li>
              <li class="tab"><a href="#tab-2">Tabbed</a></li>
              <li class="tab"><a href="#tab-3">Content</a></li>
            </ul>
            <!-- /.etabs -->
            <div class="panel-container">
              <div class="tab-block" id="tab-1">
                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                <p>Donec sed odio dui. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.</p>
                <ul class="circled">
                  <li>Mauris lacinia dui non metus dignissim venenatis.</li>
                  <li>Etiam elit tellus, condimentum tempor lobortis non.</li>
                  <li>Aliquam pharetra vestibulum arcu, eget iaculis. </li>
                </ul>
              </div>
              <!-- /.tab-block -->
              <div class="tab-block" id="tab-2">
                <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. </p>
              </div>
              <!-- /.tab-block -->
              <div class="tab-block" id="tab-3">
                <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. </p>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
              </div>
              <!-- /.tab-block --> 
            </div>
            <!-- /.panel-container --> 
          </div>
          <!-- /.tabs --> 
        </div>
        <!-- /.col-sm-6 -->
        <div class="col-sm-6">
          <h3>Toggle</h3>
          <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title"> <a data-toggle="collapse" class="panel-toggle active" data-parent="#accordion" href="#collapseOne"> 100% Responsive </a> </h4>
              </div>
              <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title"> <a data-toggle="collapse" class="panel-toggle" data-parent="#accordion" href="#collapseTwo"> Clean & Professional Design </a> </h4>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title"> <a data-toggle="collapse" class="panel-toggle" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a> </h4>
              </div>
              <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /.col-sm-6 --> 
        
      </div>
      <!-- /.row -->
      <hr />
      <h3>Tooltip</h3>
      <p>Sed posuere consectetur est at lobortis. <a href="#" title="Tooltip on top" data-rel="tooltip" data-placement="top">Morbi leo risus</a>, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Fusce dapibus, <a href="#" title="Tooltip on bottom" data-rel="tooltip" data-placement="bottom">tellus ac cursus</a> commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. <a href="#" title="Tooltip on left" data-rel="tooltip" data-placement="left">Nullam id dolor</a> id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. <a href="#" title="Tooltip on right" data-rel="tooltip" data-placement="right">Curabitur blandit tempus</a> porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
      <hr />
      <div class="row">
        <div class="col-sm-6">
          <h3>Alerts</h3>
          <div class="alert alert-warning"> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div>
          <div class="alert alert-danger"> <strong>Oh snap!</strong> Change a few things up and try submitting again. </div>
          <div class="alert alert-success"> <strong>Well done!</strong> You successfully read this important alert message. </div>
          <div class="alert alert-info"> <strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div>
        </div>
        <!-- /.col-sm-6 -->
        <div class="col-sm-6">
          <h3>Alerts with Dismiss</h3>
          <div class="alert alert-warning">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>Warning!</strong> Best check yo self, you're not looking too good. </div>
          <div class="alert alert-danger">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>Oh snap!</strong> Change a few things up and try submitting again. </div>
          <div class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>Well done!</strong> You successfully read this important alert message. </div>
          <div class="alert alert-info">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div>
        </div>
        <!-- /.col-sm-6 --> 
      </div>
      <!-- /.row -->
      <hr />
      <h3>Buttons</h3>
      <a href="#" class="btn btn-green">Button</a> <a href="#" class="btn btn-blue">Button</a> <a href="#" class="btn btn-red">Button</a> <a href="#" class="btn btn-orange">Button</a> <a href="#" class="btn btn-purple">Button</a> <a href="#" class="btn btn-pink">Button</a> <a href="#" class="btn btn-gray">Button</a>
      <div class="divide20"></div>
      <a href="#" class="btn btn-large btn-green">Button</a> <a href="#" class="btn btn-large btn-blue">Button</a> <a href="#" class="btn btn-large btn-red">Button</a> <a href="#" class="btn btn-large btn-orange">Button</a> <a href="#" class="btn btn-large btn-purple">Button</a> <a href="#" class="btn btn-large btn-pink">Button</a> <a href="#" class="btn btn-large btn-gray">Button</a>
      <hr />
      <div class="row">
        <div class="col-sm-4">
          <h3>Unordered List</h3>
          <ul class="circled">
            <li>Pellentesque non diam et tortor dignissim. </li>
            <li>Neque sit amet mauris egestas quis mattis. </li>
            <li>Cras justo odio, dapibus ac facilisis.</li>
            <li>Curabitur viver justo sed scelerisque.</li>
            <li>Aenean lacinia bibendum nulla sed consectetur.</li>
            <li>Nullam quis risus eget urna mollis ornare.</li>
          </ul>
        </div>
        <!-- /.col-sm-4 -->
        <div class="col-sm-4">
          <h3>Unordered List</h3>
          <ul>
            <li>Pellentesque non diam et tortor dignissim. </li>
            <li>Neque sit amet mauris egestas quis mattis. </li>
            <li>Cras justo odio, dapibus ac facilisis.</li>
            <li>Curabitur viver justo sed scelerisque.</li>
            <li>Aenean lacinia bibendum nulla sed consectetur.</li>
            <li>Nullam quis risus eget urna mollis ornare.</li>
          </ul>
        </div>
        <!-- /.col-sm-4 -->
        <div class="col-sm-4">
          <h3>Ordered List</h3>
          <ol>
            <li>Pellentesque non diam et tortor dignissim. </li>
            <li>Neque sit amet mauris egestas quis mattis. </li>
            <li>Curabitur viver justo sed scelerisque.</li>
            <li>Condimentum aenean risus malesuada tortor.</li>
            <li>Integer posuere erat a ante venenatis dapibus.</li>
            <li>Aenean eu leo quam. Pellentesque ornare.</li>
          </ol>
        </div>
        <!-- /.col-sm-4 --> 
      </div>
      <!-- /.row -->
      <hr />
      <h3>Blockquote</h3>
      <blockquote>
        <p> Pellentesque non diam et tortor dignissim bibendum. Neque sit amet mauris egestas quis mattis velit fringilla. Curabitur viver justo sed scelerisque. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. <small>Very important person</small></p>
      </blockquote>
      <hr />
      <h3>Dropcap</h3>
      <p><span class="dropcap">D</span>uis non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper. Nulla facilisi. Donec interdum, enim in dignissim lacinia, lectus nisl viverra lorem, ac pulvinar nunc ante at neque. Proin et dui eros, at aliquet est. Pellentesque consectetur lectus quis enim mollis ut convallis urna malesuada. Sed tincidunt interdum sapien vel gravida. Nulla a tellus lectus, in aliquet tellus. Donec aliquam.</p>
      <hr />
      <div class="row">
        <div class="col-sm-8">
          <h3>Code Display</h3>
          <pre class="prettyprint linenums">
&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Legend&lt;/legend&gt;
    &lt;label&gt;Label name&lt;/label&gt;
    &lt;input type="text" placeholder="Type something…"&gt;
    &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
    &lt;label class="checkbox"&gt;
      &lt;input type="checkbox"&gt; Check me out
    &lt;/label&gt;
    &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
</pre>
          <!-- /.prettyprint --> 
        </div>
        <div class="col-sm-4">
          <h3>Misc Typography</h3>
          <p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet<br />
            <em>This is emphasised text</em><br />
            <strong>This is strong text</strong><br />
            <span class="lite">This is hightlight</span> <abbr title="This is an abbr - &lt;abbr&gt;&lt;/abbr&gt;">This is an abbr</abbr><br />
            <del>This is deleted text</del><br />
            <a href="#">This is a link</a> </p>
        </div>
      </div>
    </div>
    <!-- /.container --> 
  </div>
  <!-- /.light-wrapper -->
  
  <footer class="footer">
    <div class="container inner">
      <p class="pull-left">© 2014 Frost. All rights reserved. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>.</p>
      <ul class="social pull-right">
        <li><a href="#"><i class="icon-s-rss"></i></a></li>
        <li><a href="#"><i class="icon-s-twitter"></i></a></li>
        <li><a href="#"><i class="icon-s-facebook"></i></a></li>
        <li><a href="#"><i class="icon-s-dribbble"></i></a></li>
        <li><a href="#"><i class="icon-s-pinterest"></i></a></li>
        <li><a href="#"><i class="icon-s-instagram"></i></a></li>
        <li><a href="#"><i class="icon-s-vimeo"></i></a></li>
      </ul>
    </div>
    <!-- .container --> 
  </footer>
  <!-- /footer --> 
</div>
<!-- .body-wrapper --> 
<script src="style/js/jquery.min.js"></script> 
<script src="style/js/bootstrap.min.js"></script> 
<script src="style/js/twitter-bootstrap-hover-dropdown.min.js"></script> 
<script src="style/js/jquery.themepunch.plugins.min.js"></script> 
<script src="style/js/jquery.themepunch.revolution.min.js"></script> 
<script src="style/js/jquery.easytabs.min.js"></script> 
<script src="style/js/owl.carousel.min.js"></script> 
<script src="style/js/jquery.isotope.min.js"></script> 
<script src="style/js/jquery.fitvids.js"></script> 
<script src="style/js/jquery.fancybox.pack.js"></script> 
<script src="style/js/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script> 
<script src="style/js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.0"></script> 
<script src="style/js/jquery.slickforms.js"></script> 
<script src="style/js/instafeed.min.js"></script> 
<script src="style/js/retina.js"></script> 
<script src="style/js/google-code-prettify/prettify.js"></script> 
<script src="style/js/scripts.js"></script>
</body>
</html>